<template>
	<view>
		<u-navbar title="优惠活动" :fixed="true" titleStyle="color:rgba(32, 32, 32, 1);font-size:36rpx;font-weight:bold"
			leftIconColor="rgba(32, 32, 32, 1)" leftIconSize="40rpx" :autoBack="true" :placeholder="true"
			height="88rpx">
		</u-navbar>

		<view class="tickets" v-for="(item,i) in mood">
			<view class="l-tickets">
				<view class="l-tickets_top">{{item.couponType}}</view>
				<view class="">
					<view class="l-tickets_text">
						<span class="l-tickets_text1">{{item.reduction}}</span>
						<span class="l-tickets_text2">%</span>
					</view>
					<view class="l-tickets_title">{{item.couponType}}</view>
				</view>
			</view>
			<view class="card4"></view>
			<view class="r-tickets">
				<view class="r-tickets_box" style="">
					<view class="r-tickets_title">+{{item.reduction}}% <span style="margin-left: 15rpx;">{{item.couponAlias}}</span> </view>
					<view class="r-tickets_flex">
						<view class="r-tickets_flex_one" v-if="item.beginTime & item.endTime">{{item.beginTime}}到{{item.endTime}}</view>
						<view class="" v-else></view>
						<view class="">
							<view class="lingqu" @click="addJuan(item.cid)">
								领取</view>
							<!-- 	<view class="weiwan">
								未完成
							</view> -->
						</view>
					</view>
					<view class="xiatite">{{item.couponScene}}</view>
				</view>

			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				mood: []
			}
		},
		onLoad() {
			this.cread()
		},
		methods: {
			async cread() {
				let res = await this.$http.users.queryUserNotCoupon({
					couponPort: 'driver'
				})
				this.mood = res.data.data
			},
		async addJuan(e){
			let that   =  this 
			let res = await  this.$http.users.receiveCoupon({cid:e})
			if(res.data.code==200){
				uni.showToast({
					title:'领取成功',
					icon:'none'
				})
				setTimeout(()=>{
					that.cread()
				},1000)
			}
		}
		}
	}
</script>

<style>
	page {
		background-color: #F3F3F3;
	}

	.xiatite {
		font-size: 20rpx;
		color: #EA4F4C;
		margin-left: 40rpx;
	}

	.weiwan {
		width: 112rpx;
		height: 54rpx;
		text-align: center;
		line-height: 54rpx;
		border: 1rpx solid #0094E9;
		color: #0094E9;
		border-radius: 27rpx;
		font-size: 24rpx;
	}

	.r-tickets_title {
		font-size: 30rpx;
		color: #262626;
		font-weight: 600;
		margin-left: 40rpx;
	}

	.lingqu {
		font-size: 24rpx;
		background-color: #0094E9;
		width: 112rpx;
		height: 54rpx;
		color: #fff;
		text-align: center;
		line-height: 54rpx;
		border-radius: 27rpx;
	}

	.l-tickets_text2 {
		color: #fff;
		font-size: 24rpx;
	}

	.r-tickets_flex {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 40rpx;
	}

	.l-tickets_title {
		text-align: center;
		color: #fff;
		font-size: 24rpx;
	}

	.tickets {
		display: flex;
		padding: 20rpx;
		width: 100%;
		height: 230rpx;
		box-sizing: border-box;
	}

	.r-tickets_box {
		margin-top: 30rpx;
	}

	.l-tickets_text1 {
		font-size: 64rpx;
		color: #fff;
	}

	.r-tickets_flex_one {
		font-size: 24rpx;
		color: #8C8C8C;
	}

	.l-tickets {
		width: 35%;
		height: 100%;
		position: relative;
		background: #0094E9;
		border-radius: 10rpx 0 0 10rpx;
	}

	.l-tickets_text {
		text-align: center;
	}

	.l-tickets_top {
		font-size: 20rpx;
		color: #fff;
		width: 80rpx;
		height: 40rpx;
		text-align: center;
		line-height: 40rpx;
		background-color: #63D1FE;
		border-radius: 10rpx 0 30rpx 0;
		padding-right: 15rpx;
	}

	.r-tickets {
		flex: 1;
		position: relative;
	}

	.l-tickets {
		width: 35%;
		height: 100%;
		position: relative;
		background: radial-gradient(circle at right top, transparent 16rpx, #0094E9 0) right top / 100% 50% no-repeat,
			radial-gradient(circle at right bottom, transparent 16rpx, #0094E9 0) right bottom / 100% 50% no-repeat;
	}

	.r-tickets {
		position: relative;
		background: radial-gradient(circle at left top, transparent 16rpx, #fff 0) right top / 100% 50% no-repeat,
			radial-gradient(circle at left bottom, transparent 16rpx, #fff 0) right bottom / 100% 50% no-repeat;
	}

	.card4 {
		right: 10px;
		width: 3px;
		height: 83%;
		background-image: linear-gradient(to bottom, #0094E9 0%, #0094E9 50%, transparent 60%);
		background-size: 100% 30rpx;
		background-repeat: repeat-y;
		margin-top: 18rpx;

	}
</style>